<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>银行链接管理</title>
    <script src="../commonCss.js"></script>
    <script src="../commonJs.js"></script>
    <link rel="stylesheet" href="../../css/common.css">
    <style type="text/css">
        table {table-layout: fixed;}
        td {
            white-space:nowrap;/*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/
            overflow:hidden;/*隐藏多余的内容*/
            text-overflow:ellipsis;/*显示省略符号来代表被修剪的文本 for IE*/
            -moz-text-overflow: ellipsis; /* for Firefox,mozilla */
        }
    </style>
</head>

<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <div class="ctc_title">银行链接管理</div>
    <div class="down_line"></div>
</section>

<!-- Main content -->
<section class="content" >
    <div class="row">
        <div class="col-xs-12">
            <div class="box-header">
                <form class="form-inline">
                    <div class="form-group">
                        <label>查询：</label>
                        <select id="selKey" class="form-control" style="text-align: center;font-size: 12px ;width:85px;">
                            <option value="">全部</option>
                            <option value="1">信用卡</option>
                            <option value="2">贷款</option>
                            <option value="3">理财</option>
                            <option value="4">保险</option>
                            <option value="5">其他</option>
                        </select>&nbsp;&nbsp;
                        <input style="width: 200px;" class="form-control" type="text" id="searchKey"  placeholder="输入银行名称搜索"/>
                    </div>
                    <div class="form-group">
                        <button type="button"  onclick="getData()"  class="btn btn-block btn-primary">搜索</button>
                    </div>
                    <div style="float: right ">
                        <div class="form-group" style="margin-right: 20px;">
                            <button type="button" onclick="addInfo()" class="btn btn-block btn-primary">新增</button>
                        </div>
                    </div>

                </form>
            </div>

            <div class="box-body" style="height:100%;">
                <table id="dataList" class="table table-bordered table-hover" >
                    <thead>
                    <tr>
                        <th>图标</th>
                        <th>银行名称</th>
                        <th>银行链接</th>
                        <th>金融机构分类</th>
                        <th>排序</th>
                        <th>添加时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody >
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>

<!-- 【编辑】弹出窗内容 -->
<div class="modal" id="editPanel" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" style="width: 50%;height: 40%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" align="center" id="mopTitle"></h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" onsubmit="return false" id="form">
                    <fieldset  style="margin-top:2%;">
                        <input type="hidden" id="id" name="id">
                        <div class="form-group" >
                            <label class="col-md-2 control-label" style="color: red">*银行名称</label>
                            <div class="col-md-10">
                                <select id="bankId" name="bankId" class="form-control" >
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label" style="color: red">*金融机构分类</label>
                            <div class="col-md-10">
                                <select id="bankType" name="bankType" class="form-control" style="text-align: center;font-size: 12px ;width:30%;">
                                    <option value="1">信用卡</option>
                                    <option value="2">贷款</option>
                                    <option value="3">理财</option>
                                    <option value="4">保险</option>
                                    <option value="5">其他</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" >
                            <label class="col-md-2 control-label" style="color: red">*银行链接</label>
                            <div class="col-md-10">
                                <input class="form-control" placeholder="必填项" type="text" name="url" id="url">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">排序</label>
                            <div class="col-md-10">
                                <input class="form-control" placeholder="非必填项" type="number" name="sort" id="sort"  >
                            </div>
                        </div>

                    </fieldset>
                </form>
            </div>
            <div class="modal-footer" style="text-align: center">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="confirmEditConfig();">确定</button>
            </div>
        </div>
    </div>
</div>



<script>
    $(document).ready(function() {
        layui.use('layer', function(){
            var layer = layui.layer;
        });
        //加载数据
        getData();
    });

    // 加载数据
    function getData(){
        var table = $('#dataList').DataTable({
            "destroy": true,   //可以重新初始化，用于搜索
            "lengthChange": false,
            "ordering": false,   //排序
            "info": true,		   //
            "autoWidth": false,   //宽度自动
            "paging": true,      //分页
            "searching": false,  //全局搜索关闭
            "processing": true,  //开启显示‘正在加载.../processing’
            "serverSide":true,    //true代表后台处理分页，false代表前台处理分页
            "ajax" :  {
                url:"/creditLink/getCreditLinkList",
                type:"POST",
                data:{
                    searchKey : $("#searchKey").val(),
                    selKey : $("#selKey").val()

                },
                dataSrc: function (myJson) {
                    return myJson.data.data;
                }
            },
            //参数显示
            "columns": [
                {"data": "icon", 'sClass': "text-center",'width': '4%',
                    "render": function ( data, type, full, meta ) {
                        return "<img style='width: 52px;height: 52px; ' src='"+data+"'>";
                    }
                },
                {"data": "bankName", 'sClass': "text-center",'width': '10%'},
                {"data": "url", 'sClass': "text-center",'width': '15%'},
                {"data": "bankType", 'sClass': "text-center",'width': '6%',
                    "render":function( data, type, full, meta) {
                        var str;
                        if(data == 1){
                            str = "信用卡";
                        }else if(data == 2){
                            str = "贷款";
                        }else if(data == 3){
                            str = "理财";
                        }else if(data == 4){
                            str = "保险";
                        }else if(data == 5){
                            str = "其他";
                        }
                        return str;
                    }
                },
                {"data": "sort", 'sClass': "text-center",'width': '5%'},
                {"data": "createTime", 'sClass': "text-center",'width': '11%',
                    "render":function( data, type, full, meta) {
                        return toDate(data).format('yyyy-MM-dd HH:mm:ss');
                    }
                },
                {"data": "id" , 'sClass': "text-center" ,'width':'5%',
                    "render": function (data, type, full, meta ) {
                        var str =  "<a href = '#' title='编辑' onclick=editInfo("+ data  +");><i class='\tglyphicon glyphicon-pencil'></i></a>&nbsp;&nbsp;&nbsp;";
                        str += "<a href = '#' title='删除' onclick = deleteInfo("+ data +");><i class='glyphicon glyphicon-trash'></i></a>&nbsp;&nbsp;&nbsp;";
                        return str;
                    }
                }
            ],

            //是否开启主题
            "bJQueryUI": true,
            "oLanguage": {    // 语言设置
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "抱歉， 没有找到",
                "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                "sInfoEmpty": "没有数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "sZeroRecords": "没有检索到数据",
                "sSearch": "检索:",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "前一页",
                    "sNext": "后一页",
                    "sLast": "尾页"
                }
            }
        });
    }

    //编辑
    function editInfo(id) {
        getAllBank();
        $("#pictue").attr("src","");
        $.ajax({
            type:"POST",
            url:"/creditLink/getCreditLinkById",
            async : true,//默认就是true
            dataType:"json",
            data:{id : id},
            success : function(res) {
                var data = res.data.creditLink;
                $("#id").val(data.id);
                $("#bankType").val(data.bankType);
                $("#url").val(data.url);
                $("#bankId").find("option[value = '"+data.bankId+"']").attr("selected","selected");
                $("#sort").val(data.sort);
            }
        });
        $("#mopTitle").text("编辑银行链接");
        $("#editPanel").modal("toggle");//弹窗打开
    }

    /**
     * 查询下拉框选择的所有银行
     */
    function getAllBank() {
        $("#bankId").empty();
        $.ajax({
            type:"POST",
            url:"/bank/getAllBank",
            async : false,//默认就是true
            dataType:"json",
            success : function(res) {
                var data = res.data.bankList;
                $("#bankId").append("<option selected value=''>--请选择--</option>");
                for (var i = 0;i<data.length;i++){
                    $("#bankId").append("<option value = '"+data[i].id+"'>"+data[i].name+"</option>");
                }
            }
        });
    }

    //打开新增窗口
    function addInfo() {

        $("#id").val("");
        $("#bankId").val("");
        $("#bankType").val(1);
        $("#url").val("");
        $("#sort").val(1);

        $("#mopTitle").text("新增银行链接");
        getAllBank();
        $("#editPanel").modal("toggle");//弹窗打开
    }

    //保存
    function confirmEditConfig(){
        var bankId = $("#bankId").val();
        var url = $("#url").val();;
        if(bankId == ""){
            layer.msg("银行名称不能为空！");
            return ;
        }
        if(url == ""){
            layer.msg("银行链接不能为空！");
            return ;
        }
        var formdata = $("#form").serializeObject();

        $.ajax({
            type : 'post',
            url : "/creditLink/updateCreditLink",
            contentType: "application/json; charset=utf-8",
            data : JSON.stringify(formdata),
            success : function(data) {
                layer.msg(data.message);
                $("#editPanel").modal("hide");
                getData();
            }
        });
    }

    //删除
    function deleteInfo(id) {
        if(confirm("确定要删除吗？")) {
            $.ajax({
                type: 'post',
                url: "/creditLink/deleteCreditLink",
                async: true,//默认就是true
                dataType: "json",
                data: {id: id},
                success: function (data) {
                    if(!data.error){
                        layer.msg(data.message);
                        getData();
                    }else{
                        layer.msg(data.message);
                    }
                }
            });
        }
    }
    let tip_index = 0;
    //表格对象
    const $dataList = $("#dataList");
    //鼠标悬停显示内容
    $dataList.on("mouseover", "td", function() {
        if(this.offsetWidth < this.scrollWidth) { //判断文本是否超出
            const content = $(this).text(); //获取文案
            if(content) {
                tip_index = layer.tips(content, this, { time: 0 , tips: [3, '#ffb951'], area: ['300px', 'auto']});
            }
        }
    });
    //鼠标移开隐藏内容
    $dataList.on("mouseleave",  "td", function() {
        layer.close(tip_index);
    })
</script>
</body>
</html>
